import { Component, ReactNode } from "react";
import { View, Button, Image, ScrollView, Text } from "@tarojs/components";
import i1 from "./images/i1.png";
import { AtList, AtListItem, AtSearchBar } from "taro-ui";
import "./index.scss";
import { getInfo } from "../../utils/auth";
import Req from "../../utils/request";
import Taro from "@tarojs/taro";
export default class Payee extends Component {
  state = {
    value: "",
    list: [],
    hasMore: true,
    total: 0,
    currentPage: 1,
    loading: false,
  };
  onChange = (val: string) => {
    this.setState({
      value: val,
    });
  };
  componentDidMount(): void {
    this.loadData();
    Taro.eventCenter.on("refreshData", this._onBackRefresh);
  }
  _onBackRefresh = (v) => {
    if (v.force) {
      this.setState(
        {
          list: [],
          currentPage: 1,
          value: "",
          total: 0,
          hasMore: true,
          loading: false,
        },
        () => {
          this.loadData();
        }
      );
    }
  };
  componentWillUnmount(): void {
    Taro.eventCenter.off("refreshData", this._onBackRefresh);
  }
  onActionClick = () => {
    this.setState({
      hasMore:true,
      list:[],
      currentPage:1,
    },() => {
      this.loadData();
    })
  };
  handleAdd = () => {
    Taro.navigateTo({
      url: `/pages/payee-form/index`,
    });
  };
  loadData = () => {
    const user_info = getInfo();
    const { currentPage, list,value } = this.state;
    this.setState({
      loading: true,
    });
    return Req.get(
      "/config/payee/list",
      {
        companyId: user_info.company?.id,
        name:value,
        pageNum: currentPage,
        pageSize: 20,
      },
      {
        loading: false,
      }
    )
      .then((r) => {
        if (r.total - list.length === 0 || r.rows.length < 10) {
          this.setState({
            hasMore: false,
          });
        }
        this.setState({
          total: r.total,
          list: list.concat([...r.rows] as any),
          currentPage: currentPage + 1,
          loading: false,
        });
      })
      .catch((e) => {
        this.setState({
          loading: false,
        });
      });
  };
  onScrollDetchEnd = () => {
    const { loading } = this.state;
    if (loading) return;
    if (this.state.hasMore) {
      this.loadData();
    } else {
      this.setState({
        loading: false,
      });
    }
  };
  render(): ReactNode {
    const { list } = this.state;
    return (
      <View className="payee-container">
        <View className="top-header">
          <AtSearchBar
            className="em-search-bar"
            value={this.state.value}
            onChange={this.onChange}
            onActionClick={this.onActionClick}
          />
          <Button onClick={this.handleAdd} className="text-button">
            <Image className="icon-1" src={i1} />
            新增
          </Button>
        </View>
        <ScrollView scrollY onScrollToLower={this.onScrollDetchEnd}>
          <AtList>
            {list.map((item: any, index) => (
              <AtListItem
                onClick={() => {
                  Taro.navigateTo({
                    url: "/pages/payee-form/index?id=" + item.id,
                  });
                }}
                key={index}
                title={item.name}
                note={item.code}
              />
            ))}
          </AtList>
          <View className="em-center-text">
            <Text>{this.state.hasMore ? "加载中..." : "没有更多了"}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}
